<template>
    <el-form ref="form" :model="base" label-width="140px" class="mt-2" v-loading="configLoading">
        <div class="flex items-center justify-between">
            <el-form-item :label="$t('system.login_name')">
                <el-input v-model="base.login_name" clearable style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.auto_exit')">
                <el-input v-model="base.auto_exit" clearable style="width: 300px;">
                    <template #append>{{ $t('system.minute') }}</template>
                </el-input>
            </el-form-item>
        </div>
        <el-form-item :label="$t('system.site_icon')">
            <el-input v-model="base.site_icon" clearable>
                <template #append>
                    <el-button icon="el-icon-upload"></el-button>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('system.login_image')">
            <sc-upload-multiple v-model="base.login_image" draggable :limit="3" :tip="$t('system.uploadTips')"></sc-upload-multiple>
        </el-form-item>
        <div class="flex items-center justify-between">
            <el-form-item :label="$t('system.site_name')">
                <el-input v-model="base.site_name" clearable style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.app_name')">
                <el-input v-model="base.app_name" clearable style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.app_version')">
                <el-input v-model="base.app_version" clearable style="width: 220px;"></el-input>
            </el-form-item>
        </div>
        <div class="flex items-center justify-between">
            <el-form-item :label="$t('system.beian')">
                <el-input v-model="base.beian" clearable style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.miitbeian')">
                <el-input v-model="base.miitbeian" clearable style="width: 300px;"></el-input>
            </el-form-item>
        </div>
            <el-form-item :label="$t('system.site_copy')">
                <el-input v-model="base.site_copy" clearable></el-input>
            </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">{{ $t('common.save') }}</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import api from '@/api';
import { ElMessage } from 'element-plus';

// 使用 Vuex store
const store = useStore();

// 数据和计算属性
const configLoading = ref(false);
const base = reactive({
    app_name: store.state.system.base.app_name,
    app_version: store.state.system.base.app_version,
    login_name: store.state.system.base.login_name,
    site_name: store.state.system.base.site_name,
    site_icon: store.state.system.base.site_icon,
    site_copy: store.state.system.base.site_copy,
    login_image: store.state.system.base.login_image,
    beian: store.state.system.base.beian,
    miitbeian: store.state.system.base.miitbeian,
    auto_exit: store.state.system.base.auto_exit,
});
// 组件挂载时加载数据
onMounted(() => {
    getConfig();
});
// 获取配置
const getConfig = async () => {
    configLoading.value = true;
    try {
        await store.dispatch("GET_CONFIG", 'storage');
    } catch (error) {
        console.error('Error in setting/system/components/settingForm/onMounted action:', error);
    } finally {
        configLoading.value = false;
    }
};
// 保存设置
const submit = async () => {
    configLoading.value = true;
    try {
        var res = await api.setting.system.save.post(base);
        if (res.code == 200) {
            ElMessage.success(res.message);
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {
        console.error('Error in setting/system/components/settingForm/submit action:', error);
    } finally {
        configLoading.value = false;
    }
};
</script>